<template>
  <Modal
    v-model="visible"
    title="选择负责人"
    @on-ok="ok"
    @on-cancel="cancel"
    class-name="centerModel"
    footer-hide
    okText="确定"
    width="284"
  >
    <Input v-model="query" placeholder="请输入部门名称"></Input>
    <div class="list" v-if="departmentUserList&&departmentUserList.length" >
      <div class="workerItem" v-for="(item,index) in departmentUserList" @click="select(item)" :key="index">
      <img
        :src="item.avatar"
        onerror="this.src='https://webimg.ziroom.com/1c853bc6-21fc-4e32-8a6f-18ec2c6fef32.png'"
      />
      <p class="name">{{item.name}}</p>
    </div>
    </div>
    <div v-else class="empty">暂无合适的负责人</div>
  </Modal>
</template>
<script>
export default {
  name: 'addSystemUser',
  props: {
    show: Boolean,
    departmentUserList: Array
  },
  data () {
    return {
      visible: this.show,
      query:'',
      form: {
        title: '',
        pid: '',
        system_user_id: ''
      }
    }
  },
  watch: {
    show (newv, oldv) {
      this.visible = newv
    }
  },
  mounted () {},
  methods: {
    ok () {
      this.$emit('showModel', false)
    },
    cancel () {
      this.$emit('showModel', false)
    },
    select(director){
      this.$emit('select',director);
      this.$emit('showModel', false);
    }
  }
}
</script>
<style lang="less" scoped>

  .list{
    min-height: 240px;
  }
  .workerItem{
    display: flex;
    align-items: center;
    margin-top: 20px;
    cursor: pointer;
    img{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #979797;
    }
    p{
      font-size: 12px;
      color: #242424;
      margin-left: 5px;
    }
  }
  .empty{
    height: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
